<template>
  <el-dialog title="编辑分类" :visible.sync="dialogVisible" width="46%" @close='clear'>
    <!-- 表单区域 -->
    <el-form ref="formRef" :model="addForm" label-width="70px" :rules="formRules">
      <el-form-item label="当前类名">
        <el-input v-model="addForm.current_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="编辑为" prop="cat_name">
        <el-input v-model="addForm.cat_name"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data: function () {
    return {
      // 控制表单的显隐
      dialogVisible: false,
      addForm: {
        id: '',
        current_name: '',
        cat_name: ''
      },
      // 添加分类表单的校验规则
      formRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击确认，修改分类名称
    confirm: function () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.put(`categories/${this.addForm.id}`, { cat_name: this.addForm.cat_name })
        if (res.meta.status !== 200) {
          return this.$message.warning('修改失败')
        }
        this.$message.success('编辑成功')
        this.$parent.getCateList()
        this.dialogVisible = false
      })
    },
    // 清空历史痕迹
    clear: function () {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
